<template>
  <ul  ref="contentContainer"
   class="infinite-list"
    v-infinite-scroll="loadPost"
    :infinite-scroll-immediate-check="false"
    :infinite-scroll-disabled="scrollDisabled"
    infinite-scroll-watch-disabled="scrollDisabled"
    :infinite-scroll-distance="0">  

    <li v-for="(post,index) in postList" :key="index" class="infinite-list-item">
      <el-card class="card" shadow="hover">
        <template #header>
          <div>
            <div class="cardHead" @click="putPost(post.id)">
              <div class="cardTitle">{{ post.title }}</div>
              <div class="cardName" style="">
                {{ 
                (post.forumStudent.nickName!=null && post.forumStudent.nickName!="" ? post.forumStudent.nickName : post.forumStudent.studentName) 
                + " | " + 
                (isLocal == true ? getCollegeNameForId(post.forumStudent.collegeId).name : getSchoolNameForId(post.forumStudent.schoolId).name)
                }}
              </div>
            </div>
          </div>
        </template>
        <div class="cardBody">
          <div class="cardHtml" v-html="updatePost(post.content)"></div>
          <div class="cardEnd">
            <div class="star"> <!-- 收藏数 -->
              <el-icon color="rgb(235, 243, 0)" size="16"><Star /></el-icon>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(post.collectNumber) }}</p>
            </div>
            <div class="upvote"> <!-- 点赞数 -->
              <el-icon color="rgb(245, 45, 45)" size="16"><IceTea /></el-icon>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(post.upvoteNumber) }}</p>
            </div>
            <div class="review"> <!-- 评论数 -->
              <el-icon color="rgb(121, 187, 255)" size="16"><ChatDotRound /></el-icon>
              <p style="margin: 0 0 0 3px;">{{ updateNumber(post.reviewNumber) }}</p>
            </div>
            <div style="flex-grow: 1;"></div>
            <div class="createTime"> <!-- 创建时间 -->
              <p style="margin: 0 0 0 3px;">发布时间：{{ post.createTime }}</p>
            </div>
          </div>
        </div>
      </el-card>
    </li>
    <!-- <div v-show="isLoad" style="display: flex;justify-content:center;height: 50px;align-items:center;">
      <el-text class="mx-1" type="primary">load...</el-text>v-show="scrollDisabled"
    </div> -->
    <div  style="display: flex;justify-content:center;height: 50px;align-items:center;">
      <el-text class="mx-1" type="primary">{{ isLoad?"load...":(scrollDisabled?"终归要有个底线吧！":"") }}</el-text>
    </div>
  </ul>
</template>
  
<script >
import useBaseStore from "@/store/forum/base"
import usePostStore from "@/store/forum/post"

export default{
  data(){
    return {
      count : 20,
      isLoad : false,
      studentList: []
    }
  },
  props:{
    isLocal: {
      type: Boolean,
      required: true,
      // default: true
    },
  },
  computed: {
    total(){
      return usePostStore().total;
    },
    scrollDisabled(){
      return this.postList && this.postList.length>=this.total;
    },
    collegeList(){
      return useBaseStore().collegeList;
    },
    schoolList(){
      return useBaseStore().schoolList;
    },
    postList(){
      return usePostStore().postList;
    },
  },
  methods:{
    putPost(postId){
      // this.$emit("putPostDetail");
      // this.$router.push({
      //   path:'/index/hehe/testOne',
      // })
      // console.log(postId)
      // console.log({
      //   path:'/post?postId='+postId,
      // })
      // console.log({ path: '/post', query: { postId: postId } })
      // this.$router.push({ path: '/post', query: { postId: postId } })
      this.$router.push({ path: '/post/'+postId })
      // this.$router.push({
      //   path:'/post'+"?postId="+postId,
      // })
    },
    updateNumber(number){
      return usePostStore().normalizeNumber(number);
    },
    getCollegeNameForId(collegeId){
      return useBaseStore().getCollegeForId(collegeId);
    },
    getSchoolNameForId(schoolId){
      return useBaseStore().getSchoolForId(schoolId);
    },
    updatePost(htmltext){
      const div = document.createElement('div');
      div.innerHTML = htmltext;
      let text = div.innerText;
      if(text.length>100){
        text = text.substring(0,99);
        text += "..."
      }
      // console.log(text.substring(0,5)); 
      return text;
    },
    moveImagesToEnd() {
      const contentContainer = this.$refs.contentContainer;
      const images = contentContainer.querySelectorAll('img');
      const posthtml = document.querySelector("#posthtml");
      images.forEach(img => {
        posthtml.appendChild(img);
      });
    },
    loadPost(){
      this.isLoad = true;
      // console.log("加载帖子"+this.postList.length)
      usePostStore().onLoadPostList();
      // this.isLoad = false;
      setTimeout(()=>{
        // console.log("加载帖子"+this.postList.length)
        this.isLoad = false;
      }, 500)
    },
  },
  watch:{
    // "postList":{
    //   immediate: true,
    //   handler(){
    //     console.log("postList")
    //     console.log(this.postList)
    //   }
    // },
  }
}

</script>
<style lang="scss">
.cardHtml{
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 20px;
  img{
    height: 100px;
  }
  p {
    font-size: 16px;
    line-height: 20px;
  }
}
</style>
<style scoped lang="scss">
.card{
  display: flex;
  flex-direction: column;
  width: 100%;
  .cardHead{
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    .cardTitle{
      color: black;
      font-size: 24px;
      font-weight: 500;
      cursor: pointer;
    }
    .cardName{
      color: rgb(64, 158, 255);
      font-size: 20px;
      font-weight: 500;
    }
  }
  .cardBody{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    .cardHtml{
    }
    .cardEnd{
      display: flex;
      flex-direction: row;
      font-size: 15px;
      // align-content: center;
      // vertical-align:middle;
      line-height: 16px;
      div{
        margin: 15px 0 0 10px;
      }
      .star{
        display: flex;
        flex-direction: row;
      }
      .upvote{
        display: flex;
        flex-direction: row;
      }
      .review{
        display: flex;
        flex-direction: row;
      }
      .createTime{
        display: flex;
      }
    }
  }
}
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
.infinite-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* height: 50px; */
  background: var(--el-color-primary-light-9);
  margin: 10px;
  color: var(--el-color-primary);
}
/* .infinite-list .infinite-list-item + .list-item {
  margin-top: 10px;
} */
</style>

// img {
//   max-width: 100%;
//   height: auto;
//   color: red;
// }
// .divtext {
//   color: red;
// }
// p {
//   color: red;
// }

// postList: [
// {
//   title: "新年快乐！大家龙年吉祥。",
//   name: "魏翱",
//   college: "信息工程学院",
//   collectNumber: 11,
//   reviewNumber: 50,
//   upvoteNumber: 22,
//   context1: `<p class="divtext">大家，新的一年也要继续努力呀！不管是学习，还是工作，希望大家在新的一年有个好的开始，工作顺利，学习进步，雄起。</p><p><img src="/dev-api/profile/upload/2024/03/11/logo_20240311104341A002.png"></p><p>没有烦恼，没有烦心事，啥都没有。</p><p><img src="/dev-api/profile/upload/2024/03/11/神子枫叶1_20240311104335A001.jpg"></p>`
// },
// ],